<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/shoppingcart.css" />
	</head>
	<body>
		<!-- 179000611王少琦 -->
		<div class="body">
			<div class="shop"><i></i><span>我的购物车</span></div>
			<div class="product">
				<div class="product-box">
					<div class="product-ckb"><em class="product-em product-xz"></em></div>
					<div class="product-sx">
						<a href="###">
							<img src="img/a3.png" class="product-img" />
							<span class="product-name">酷冷至尊(Cooler Master)T610P CPU风冷散热器</span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">299</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" />
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>
				<div class="product-box">
					<div class="product-ckb"><em class="product-em"></em></div>
					<div class="product-sx">
						<a href="###">
							<img src="img/a1.png" class="product-img" />
							<span class="product-name">游戏悍将 35英寸曲面电竞显示器21:9带鱼屏准4K游戏显示器</span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">2099</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" />
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>

				<div class="product-box">
					<div class="product-ckb"><em class="product-em"></em></div>
					<div class="product-sx">
						<a href="###">
							<img src="img/a2.png" class="product-img" />
							<span class="product-name">技嘉（GIGABYTE） 2080TURBO OC 8GC</span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">1099</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" />
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>

				<div class="product-box">
					<div class="product-ckb"><em class="product-em"></em></div>
					<div class="product-sx">
						<a href="###">
							<img src="img/a4.png" class="product-img" />
							<span class="product-name">AMD 锐龙 5 2600X 处理器 (R5) 6核12线程 AM4 </span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">1299</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" />
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>
			</div>
			<div class="product-js">
				<div class="product-al">
					<div class="product-all">
						<em class=""></em>
					</div>
					<div class="all-xz"><span class="product-all-qx">全选</span>
						<div class="all-sl" style="display: none;">(<span class="product-all-sl">0</span>)</div>
					</div>
				</div>
				<a href="#" class="product-sett product-sett-a">结算</a>
				<div class="all-product"><span class="all-product-a">¥&thinsp;<span class="all-price">296</span></span></div>

			</div>
		</div>
		<!--购物车空-->
		<div class="kon-cat">
			<div class="catkon">
				<div class="kon-box">
					<div class="kon-hz">
						<img src="img/cart-air.png" />
						<span class="kon-wz">购物车什么都没有</span>
						<a href="###" class="kon-lj">去逛逛</a>
					</div>
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
		<script>
			//金额计算
			function count(){
				let sum = 0;
				for(let i= 0;i<$("em.product-em").length;i++){
					if($("em.product-em:eq("+i+")").hasClass("product-xz")){
						let price = Number($("span.price:eq("+i+")").html());
						let num = Number($("input.product-num:eq("+i+")").val());
						sum += price*num;
					}
				}
				$("span.all-price").html(sum);	
			}
			count();
			function check(){
				if($("span.all-price").html() == "0"){
					$("a.product-sett").addClass("product-sett-a");
				}else{
					$("a.product-sett").removeClass("product-sett-a");
				}
			}
			check();
			// 检查购物车是否为空
			function checkEmpty(){
				if($("div.product-box").length == 0){
					$("div.kon-cat").css("display","inline");
				}
			}
			// 商品数量加
			$("em.product-add").click(function(){
				$(this).prev().val(Number($(this).prev().val())+1)
				// 计算
				count();
			});
			// 商品数量减
			$("em.product-jian").click(function(){
				if($(this).next().val()<=1){
					return;
				}
				$(this).next().val(Number($(this).next().val())-1);
				count();
			});
			// 点击垃圾桶移除商品
			$("div.product-del").click(function(){
				if(confirm("确定移除该商品吗？")){
					$(this).parent().parent().remove();
				}
				count();
				check();
				checkEmpty();
			});
			// 选择商品
			$("em.product-em").click(function(){
				if($(this).hasClass("product-xz")){
					$(this).removeClass("product-xz")
				}else{
					$(this).addClass("product-xz")
				}
				count();
				check();
			});
			// 全选
			$("div.product-all>em").click(function(){
				if($(this).hasClass("product-all-on")){
					$(this).removeClass("product-all-on")
					// 选中所有
					$("em.product-em").removeClass("product-xz");
				}else{
					$(this).addClass("product-all-on")
					// 取消选中
					$("em.product-em").addClass("product-xz");
				}
				count();
				check();
			});
			// 结算
			function accounts(){
				for(let i= 0;i<$("em.product-em").length;i++){
					if($("em.product-em:eq("+i+")").hasClass("product-xz")){
						return i;
					}
				}
				return -1;
			}
			$("a.product-sett").click(function(){
				if($("span.all-price").html() == "0"){
					alert("未选择商品")
				}else{
					if(confirm("金额："+$("span.all-price").html()+"，是否确认付款？")){
						while(accounts() != -1){
							$("div.product-box:eq("+accounts()+")").remove();
						}
					}		
				}
				count();
				check();
				checkEmpty();
			});
		</script>
	</body>
</html>
